<template>
  <div class="onDutyRate">
    <div class="onDutyRate_top">
      <div class="onDutyRate_top_left">
        <pieChart id="genderRatioRate" ref="genderRatioRate" width="45%"></pieChart>
        <tableBox :data="genderRatioData" :show-serial-number="false" :showThead="true" :thead-list="genderRatioThead">
        </tableBox>
      </div>
      <div class="onDutyRate_top_right">
        <pieChart id="jobRate" ref="jobRate" width="40%"></pieChart>
        <tableBox :data="jobData" :show-serial-number="false" :showThead="true" :thead-list="jobThead"></tableBox>
      </div>
    </div>
    <div class="onDutyRate_bottom">
      <tableBox :data="staffProjectData" :show-serial-number="false" :showThead="true" :thead-list="staffProjectThead"
        @toGroupList="toGroupList">
      </tableBox>

    </div>
  </div>
</template>
<script>
import tableBox from "../components/tableBox.vue"
import pieChart from "../components/pieChart.vue"
import { getStaffBySexAge, getStaffManagerRate, getStaffManagerTable, getStaffStatusByProject } from "@/api/bi/HRAndContract";

export default {
  components: { tableBox, pieChart },
  data() {
    return {
      load: null,
      genderRatioThead: ['性别', '年龄区间', '总人数'],
      genderRatioData: [],
      jobThead: ['项目区域', '经理', '主管', '领班', '员工', '总人数'],
      jobData: [],
      staffProjectThead: ['业态', '项目区域', '项目名称', '合同人数', '在岗人数', '缺编人数', '待离职', '待入职', '已入职'],
      staffProjectData: []
    }
  },
  mounted() {
    this.load = this.$loading({
      lock: true,
      text: '加载中...',
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getGenderRatioData()
    this.getJobData()
    this.getJobTableData()
    this.getStaffProjectData()
  },
  methods: {
    async getGenderRatioData() {
      const { data: res } = await getStaffBySexAge();
      let chartData = [{ value: res.manRate, name: '男' },
      { value: res.womanRate, name: '女' }]
      this.$refs.genderRatioRate.initChart(chartData)

      this.genderRatioData = [
        [{ val: '男性', rowspan: 4 }, { val: '60岁以下' }, { val: res.manBelow60 }],
        [{ val: '60-65岁' }, { val: res.manBelow60or65 }],
        [{ val: '65-70岁' }, { val: res.manBelow66or70 }],
        [{ val: '70岁以上' }, { val: res.manAbove70 }],
        [{ val: '女性', rowspan: 4 }, { val: '60岁以下' }, { val: res.womanBelow60 }],
        [{ val: '60-65岁' }, { val: res.womanBelow60or65 }],
        [{ val: '65-70岁' }, { val: res.womanBelow66or70 }],
        [{ val: '70岁以上' }, { val: res.womanAbove70 }],
      ]
      this.load.close();
    },
    async getJobData() {
      const { data: res } = await getStaffManagerRate();
      let chartData = [{ value: res.leaderRate, name: '经理' },
      { value: res.managerRate, name: '主管' },
      { value: res.foremanRate, name: '领班' }]
      this.$refs.jobRate.initChart(chartData)
    },

    async getJobTableData() {
      const { data: res } = await getStaffManagerTable();
      this.jobData = []
      res.forEach(item => {
        let total = item.leaderNumber + item.managerNumber + item.foremanNumber + item.staffNumber
        this.jobData.push([{ val: item.projectRegion }, { val: item.leaderNumber }, { val: item.managerNumber }, { val: item.foremanNumber }, { val: item.staffNumber }, { val: total }])
      })

    },
    async getStaffProjectData() {
      const { data: res } = await getStaffStatusByProject();
      this.staffProjectData = []
      res.forEach(item => {
        this.staffProjectData.push([{ val: item.projectBusiness }, { val: item.projectRegion }, { val: item.projectName, click: 'toGroupList', key: item.projectId, style: "cursor: pointer;color:#409EFF" }, { val: item.contractNumber }, { val: item.postNumber }, { val: item.notPostNumber }, { val: item.onResignNumber }, { val: item.onEmployedNumber }, { val: item.employedNumber }])
      })

    },
    toGroupList(key) {
      this.$router.push("/project/add-group/groupList/" + key);
    }
  }
}
</script>
<style lang="scss" scoped>
.onDutyRate {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .onDutyRate_top {
    // background: #fff;
    height: 40vh;
    display: flex;
    justify-content: space-between;

    .onDutyRate_top_left {
      width: 40%;
      background: #fff;
      border-radius: 6px;
      margin-right: 20px;
      display: flex;
      padding: 20px;
      box-sizing: border-box;

      >div:nth-child(2) {
        width: 55%;
        margin-left: 20px;
      }
    }

    .onDutyRate_top_right {
      width: 60%;
      background: #fff;
      border-radius: 6px;
      padding: 20px;
      display: flex;
      justify-content: space-between;

      >div:nth-child(2) {
        width: 55%;
        margin-left: 20px;
      }
    }
  }

  .onDutyRate_bottom {
    background: #fff;
    height: 50vh;
    padding: 20px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>